<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>방명록</title>
<script type="text/javascript">
	var count=1;
	$(document).ready(function(){
		// 글쓰기 버튼을 클릭하면 실행한다.
		$("#registerGuest").click(function(){
			var contentCheck = $(":input[name=content]").val(); // 내용 확인
			// 로그인한 사용자는 내용을 입력하지 않으면 등록할 수 없다.
			if(contentCheck==""){
				alert("내용을 입력하세요");	
				return false;
			} else if(confirm("등록할거니?")){
				// 폼안의 내용을 serialize() 로 전송한다.
				var registermsg = $("#guestWriteForm").serialize();
				$.ajax({
					type:"POST", 
					url:"writeGuestBoard.inven",
					dataType:"json",
					data:registermsg+"&low=1&high=5",
					success:function(jsonData){
						// 성공하면 list를 받아온다.
						$("#listView").show();
						var table = "";
						$.each(jsonData, function(index, value){
							// id 의 값을 체크해 로그인한 사용자에 대해 자신의 게시물만
							// 수정, 삭제버튼이 뜨도록 한다.
							if(value.id == $("#id").val()){
								table += "<input type='hidden' name='memberId' id='memberId' value="+value.id+
								"><tr><td><p>작성자 :  <a href=''>"+value.name+
								" | <a href="+"javascript:detailBoard("+value.no+")>수정</a>"+
								" | <a href="+"javascript:deleteBoard("+value.no+")>삭제</a>"+
								" | 작성일시 : "+value.timePosted+"</p></td></tr>"+
								"<tr><td height='70'><p>"+value.content+"</p></td></tr>";
							} else{
								table += "<input type='hidden' name='guestId' value="+value.id+
								"><tr><td><p>작성자 : "+value.name+" | 작성일시 : "+value.timePosted+"</p></td></tr>"+
								"<tr><td height='70'><p>"+value.content+"</p></td></tr>";
							} 
						});
						// tbody 에 list 테이블을 출력한다.
						$("#allListtb").html(table);
						// 등록 성공하면 폼안의 내용을 초기화 한다.
						$("#content").val("");
					} // success
				}); // ajax
			} // if
			// 등록취소를 누르면 폼안의 내용을 초기화 한다.
			$("#content").val("");
		}); // 글쓰기 click 
		
		$("#updateGuest").click(function(){
			if(confirm("수정할거니?")){
				// 폼안의 내용을 시리얼라이즈로 데이터를 전송한다.
				var updateData = $("#updateWriteForm").serialize();
				$.ajax({
					type:"POST", 
					url:"updateGuestBoard.inven",
					dataType:"json",
					data:updateData+"&low=1&high=5",
					success:function(jsonData){
						// 성공하면 list를 받아온다.
						$("#listView").show();
						var table = "";
						$.each(jsonData, function(index, value){
							// id 의 값을 체크해 로그인한 사용자에 대해 자신의 게시물만
							// 수정, 삭제버튼이 뜨도록 한다.
							if(value.id == $("#id").val()){
								table += "<input type='hidden' name='memberId' id='memberId' value="+value.id+
								"><tr><td><p>작성자 :  <a href=''>"+value.name+
								" | <a href="+"javascript:detailBoard("+value.no+")>수정</a>"+
								" | <a href="+"javascript:deleteBoard("+value.no+")>삭제</a>"+
								" | 작성일시 : "+value.timePosted+"</p></td></tr>"+
								"<tr><td height='70'><p>"+value.content+"</p></td></tr>";
							} else{
								table += "<input type='hidden' name='guestId' value="+value.id+
								"><tr><td><p>작성자 : "+value.name+" | 작성일시 : "+value.timePosted+"</p></td></tr>"+
								"<tr><td height='70'><p>"+value.content+"</p></td></tr>";
							} 
						});
						// tbody 에 list 테이블을 출력한다.
						$("#allListtb").html(table);
						// 등록 성공하면 폼안의 내용을 초기화 한다.
						$("#updatecontent").val("");
						// 수정폼을 숨긴다.
						$("#detailView").hide();
						// 글쓰기 폼를 보여준다
						$("#WriteView").show();
					} // success
				}); // ajax
			} // if
			// 등록취소 누르면 폼안의 내용을 초기화 한다.
			$("#updatecontent").val("");
		}); // 수정 click
		
		// 더보기 버튼 누를시 실행된다.
		$("#buttonView").click(function(){
			// 카운트를 5개씩 누적시켜 더 보여준다.
			count += 5;		
			$.ajax({
				type:"POST", 
				url:"boardPlusAllBoard.inven",
				dataType:"json",
				data: "low="+count+"&high="+(count+4),
				// 최소값과 최대값을 보내 해당하는 리스트를 받아온다. 
				success:function(jsonData){
					$("#listView").show();
					var table = $("#allListtb").html();
					// 마지막 더보기를 누를때는 alert() 창을 띄워 알려준다.
					if(jsonData.length == 0){
						alert("마지막페이지 입니다.");
						$("#plusView").hide();
					} else {
						$.each(jsonData, function(index, value){
							if(value.id == $("#id").val()){
								table += "<input type='hidden' name='memberId' id='memberId' value="+value.id+
								"><tr><td><p>작성자 :  <a href=''>"+value.name+
								" | <a href="+"javascript:detailBoard("+value.no+")>수정</a>"+
								" | <a href="+"javascript:deleteBoard("+value.no+")>삭제</a>"+
								" | 작성일시 : "+value.timePosted+"</p></td></tr>"+
								"<tr><td height='70'><p>"+value.content+"</p></td></tr>";
							} else{
								table += "<input type='hidden' name='guestId' value="+value.id+
								"><tr><td><p>작성자 : "+value.name+" | 작성일시 : "+value.timePosted+"</p></td></tr>"+
								"<tr><td height='70'><p>"+value.content+"</p></td></tr>";
							} // if
						}); // each
					}// if
					// tbody 에 list 테이블을 출력한다.
					$("#allListtb").html(table);
				} // success
			}); // ajax
		}); // 더보기 버튼 클릭
	}); 
	
	// 삭제버튼 클릭하면 실행한다.
	function deleteBoard(no){
		// 수정폼을 숨긴다.
		$("#detailView").hide();
		// 글쓰기 폼을 보여준다.
		$("#WriteView").show();
		if(confirm("삭제하시겠습니까?")){
			$.ajax({
				type:"POST", 
				url:"deleteMemberBoard.inven",
				dataType:"json",
				data:"no="+no+"&low=1&high=5",
				success:function(jsonData){
					// 성공하면 list를 받아온다.
					$("#listView").show();
					var table = "";
					$.each(jsonData, function(index, value){
						if(value.id == $("#id").val()){
							table += "<input type='hidden' name='memberId' id='memberId' value="+value.id+
							"><tr><td><p>작성자 :  <a href=''>"+value.name+
							" | <a href="+"javascript:detailBoard("+value.no+")>수정</a>"+
							" | <a href="+"javascript:deleteBoard("+value.no+")>삭제</a>"+
							" | 작성일시 : "+value.timePosted+"</p></td></tr>"+
							"<tr><td height='70'><p>"+value.content+"</p></td></tr>";
						} else{
							table += "<input type='hidden' name='guestId' value="+value.id+
							"><tr><td><p>작성자 : "+value.name+" | 작성일시 : "+value.timePosted+"</p></td></tr>"+
							"<tr><td height='70'><p>"+value.content+"</p></td></tr>";
						} 
					});
					// tbody 에 list 테이블을 출력한다.
					$("#allListtb").html(table);
				} // success
			}); // ajax 
		} // if
	} // function
	
	// 상세보기 폼
	function detailBoard(no){
		// 상세보기 폼를 보여준다
		$("#detailView").show();
		// 글쓰기 폼을 숨긴다.
		$("#WriteView").hide();
		$.ajax({
		 	type:"post",
		  	url:"detailBoard.inven",
		   	dataType:"json",
		   	data:"no="+no,
		   	success:function(data){
		   		// 상세보기 폼으로 수정하려는 게시물의 데이터를 보여준다.
		    	var table = "<input type='hidden' name=no value="+data.no+">"+
		    	"<input type='hidden' name=id' id='id' value="+data.id+">"+
		    	"<tr><td><p>작성자 : <input type='text' readonly='readonly' size='10' name='name' id='updateName' value="+data.name+
		    	"></p></td></tr>"+
		    	"<tr><td><textarea cols='90' rows='5'id='updatecontent' name='content'>"+
		    	data.content+"</textarea></td></tr>";
		    	$("#updatetb").html(table); 
		   	} // success
		}); // ajax 
	}
	 
	 
</script>	
</head>

<body>

<%-- 로그인 글쓰기 폼 --%>
<div id="WriteView">
<form id="guestWriteForm">
	<table border="0" cellpadding="2" bordercolor="black" align="center">
		<tr> 
			<td><p>작성자 : <input type="text" readonly="readonly" size="10" name="name" id="name" value="${sessionScope.mvo.id }"></p>
				<input type="hidden" name="id" id="id" value="${sessionScope.mvo.id }">
			</td>
		</tr>
		<tr>
			<td><textarea cols="90" rows="5" name="content" id="content"></textarea></td>
		</tr>
		</tbody>
	</table>
	<span>
		<input type="button" value="글쓰기" id="registerGuest" class="guest_button">
	</span>
</form>
</div>

<%-- 상세보기 폼 --%>
<div id="detailView" style="display: none">
<form id="updateWriteForm">
	<table border="0" cellpadding="2" bordercolor="black" align="center">
		<tbody id="updatetb">
		</tbody>
	</table>
	<span id="">
		<input type="button" value="수정하기" id="updateGuest" class="guest_button">
	</span>
</form>
</div>

<hr class="gray_hr">
<%-- 방명록 리스트를 가져온다. --%>
<div id="listView">
	<table border="0" width="700" cellpadding="2" align="center">
		<%-- tbody 를 설정하여 글이 추가될 때마다 스크립트에서 새로 갱신되도록 한다.--%>
		<tbody id="allListtb">
			<%-- for 문을 돌려 list 를 출력한다. --%>
			<c:forEach var="board" items="${requestScope.list }">
			<c:choose>
				<c:when test="${board.id == sessionScope.mvo.id }">
				<input type="hidden" id="loginNo" value="${board.no }">
				<input type="hidden" name="memberId" value="${board.id }">
					<tr>
						<td><p>작성자 : <a href="">${board.name }</a>
						| <a href="javascript:detailBoard(${board.no })">수정</a>
						| <a href="javascript:deleteBoard(${board.no })">삭제</a>
						| 작성일시 : ${board.timePosted }</td>
					</tr>
				</c:when>
				<c:otherwise>
					<tr>	
						<td><p>작성자 : ${board.name } | 작성일시 : ${board.timePosted }</p></td>
					</tr>
				</c:otherwise>
			</c:choose>
					<tr>
						<td height="70">
						<p>${board.content}</p>
						</td>
					</tr>
			</c:forEach>	
		</tbody>
	</table>
</div>

<%-- 더보기 버튼 --%>
<div id="plusView"><input type="button" value="더 보기" id="buttonView" class="guest_button"></div>

</body>
</html>